<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate自定义动画</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
//自定义动画用animate
            // $('.button').click(function () {
            //     $('.box').animate({
            //         width:'300px',
            //         height:'300px',
            //         fontSize:'50px',
            //         opacity:'0.5'
            //     },1000,function () {
            //     alert("动画执行完毕");
            //     });
            // });
//自定义动画 从一个位置 移动到另外一个位置
//             $('.button').click(function () {
//                 $('.box').animate({
//                     left:'300px'// 运到到300px这 而不是在原来的基础上加上300px
//                 });
//             });
//自定义动画 从一个位置 移动到另外一个位置  每次增加300px
//             $('.button').click(function () {
//                 $('.box').animate({
//                     left:'+=300px'// 每点击按钮一次 就增加300px的移动
//                 });
//             });
//多个动画效果 嵌套 第一种方法
//             $('.button').click(function () {
//                 $('.box').animate({height:'300px'},function(){
//                     $('.box').animate({width:'300px'},function(){
//                         $('.box').animate({fontSize:'50px'},function(){
//                             $('.box').animate({opacity:'0.5'},function(){
//                                 alert('全部执行完毕');
//                             });
//                         });
//                     });
//                 });
//             });
//多个动画效果 嵌套 第二种方法
//             $('.button').click(function () {
//                 $('.box').animate({height:'300px'})
//                     .animate({width:'300px'})
//                     .animate({fontSize:'50px'})
//                     .animate({opacity:'0.5'})
//             });
//按照队列执行动画效果
//             $('.button').click(function () {
//             $('.box').slideUp('slow')
//                 .slideDown('slow')
//                 .queue(function () { //queue队列 依次执行动作
//                     $(this).css('background-color','red');
//                 });
//         });

        $('.button').click(function () {
                $('.box').slideUp('slow')
                .slideDown('slow')
                .queue(function (next) { //queue队列 依次执行动作
                    $(this).css('background-color','red');
                    next();//queue后面如果需要执行动画效果需要添加next
                }).hide('slow');
            });
        });
    </script>
</head>
<body>
    <input  class="button" type="button" value="animate">
    <div class="box" style="width: 100px;height: 100px;background-color: #bfa;position:absolute;">div</div>
    <div style="height: 700px;width: 1px;background-color: black;position: absolute;left: 300px;top: 0" ></div>
<script>
    /*1.animate({key:value,key:value.....},number,fun);
      2.位移效果
      3.组合动画
    *多个动画执行效果 嵌套
第一种方法:
$('.button').click(function () {
    $('.box').animate({height:'300px'},function(){
        $('.box').animate({width:'300px'},function(){
            $('.box').animate({fontSize:'50px'},function(){
                $('.box').animate({opacity:'0.5'},function(){
                    alert('全部执行完毕');
                });
            });
        });
    });
});
第二种方法:
$('.button').click(function () {
    $('.box').animate({height:'300px'})
        .animate({width:'300px'})
        .animate({fontSize:'50px'})
        .animate({opacity:'0.5'})
});
按照队列执行动画效果
$('.button').click(function () {
    $('.box').slideUp('slow')
    .slideDown('slow')
    .queue(function () { //queue队列 依次执行动作
        $(this).css('background-color','red');
    });
});
//如果queue后面还有动画效果需要执行 需要用next
$('.button').click(function () {
        $('.box').slideUp('slow')
        .slideDown('slow')
        .queue(function (next) { //queue队列 依次执行动作
            $(this).css('background-color','red');
            next();//queue后面如果需要执行动画效果需要添加next
        }).hide('slow');
    });
    *
    * */
</script>
</body>
</html>